import React,{useState,useEffect} from "react";
import { Text,View,Image,FlatList,RefreshControl,ActivityIndicator} from 'react-native';
import Headers from '@/app/components/header/Headers';
import { styles } from "./style/logsstyles";
import {size} from '@/app/utils';
import Nodata from '@/app/components/Nodata'
import { useTranslation } from '@/app/utils/useTranslation';
import {getTuanDuiWallettransferApi} from './serve'
const LiCaiLogsScreen = (props:any) => {
    const { t } = useTranslation();
    let [opciaty,setOpciaty] = useState(0);
    let [total,setTotal] = useState(0);
    let [page,setPage] = useState(1);
    let [loading,setLoading] = useState(true);
    let [refreshing,setRefreshing] = useState(false);
    let [list,setList] = useState([{},{},{},{},{},{},{},{}]);

    useEffect(()=>{
        getShouYiLlogsListInit();
    },[page])

    const getShouYiLlogsListInit=()=>{
        let params={
            page:page,
            limit:10,
        }
        console.log('params-:',params)
        getTuanDuiWallettransferApi(params).then((res: any)=>{
            let data = res.data||{};
            let dataList = data.data||[];
            if(page==1){
                list = [...dataList]
            }else{
                list = [...list,...dataList]
            }
            setTotal(data.total)
            setRefreshing(false);
            setList(list)
            setLoading(false);
        }).catch(()=>{
            setRefreshing(false);
        })
    }

    const handleLoadMore=()=>{
        console.log('handleLoadMore 被调用 - 当前 page:', page);
        if (loading || refreshing) {
            return false;
        }
        if(list.length<10){
            return false
        }else{
            if (list.length!==total){
                console.log('准备更新 page 从', page, '到', page+1);
                setPage(page+1);
            }
        }
    };

    const handleRefresh=()=>{
        if(loading){
            return false;
        }
        console.log('handleRefresh 被调用 - 当前 page:', page);
        setRefreshing(true);
        setPage(1);
        // 强制触发数据重新加载
        getShouYiLlogsListInit();
    };

    const renderFooter = () => {
        if (list.length===total){
            if(list.length===total && list.length>0){
                return (
                    <View style={{paddingTop:20,paddingBottom:15}}>
                        <Text style={{color:'#ccc',fontSize:14,textAlign:'center',}}>数据加载完毕</Text>
                    </View>
                )
            }else{
                return null;
            }
        }else{
            if(loading){
                return null;
            }
            return (
                <View
                    style={{
                        paddingVertical: 20,
                        borderTopWidth: 1,
                        borderColor: "#f9f9f9"
                    }}
                >
                    <ActivityIndicator animating color={'#38B781'} size="large" />
                </View>
            );
        }
    };

    return(
        <View style={{ flex: 1,flexDirection:'column',backgroundColor:'#fff'}}>
            <Headers
                title={'记录'}
                border={false}
                barStyle={0}
                leftIcon={require('@/assets/images/icon/back.png')}
                leftTitle={''}
                backgroundColor={`rgba(255,255,255,${opciaty})`}
                centerColor={'#666'}
                {...props}
            />
            <View style={{flex: 1,flexDirection:"column"}}>
                <FlatList
                    style={{paddingLeft:size(16),paddingRight:size(16),flex:1,}}
                    keyExtractor={(item, index) => index.toString()}
                    data={list}
                    renderItem={({ item }) => {
                        if(loading){
                            return <View style={styles.listItem}>
                            <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
                                <View style={{flexDirection:'row',alignItems:'center',height:size(14),backgroundColor:'#f9f9f9',width:size(100)}}>
                                    
                                </View>
                            </View>
                            <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginTop:size(13)}}>
                                <View style={{flexDirection:'row',alignItems:'center',height:size(14),backgroundColor:'#f9f9f9',width:size(100)}}>
                                    {/* <Text style={styles.listItemDesc}>数量</Text> */}
                                </View>
                                <View style={{height:size(14),backgroundColor:'#f9f9f9',width:size(100)}}>
                                </View>
                            </View>
                            <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginTop:size(13)}}>
                                <View style={{flexDirection:'row',alignItems:'center',height:size(14),backgroundColor:'#f9f9f9',width:size(100)}}>
                                    {/* <Text style={[styles.listItemDesc,{fontWeight:'500',color:'#333333'}]}>{item.number}</Text> */}
                                </View>
                                <View style={{height:size(14),backgroundColor:'#f9f9f9',width:size(100)}}>
                                </View>
                            </View>
                        </View>
                        }else{
                            return (
                                <View style={styles.listItem}>
                                    <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
                                        <View style={{flexDirection:'row',alignItems:'center'}}>
                                            <Image
                                                style={styles.noticeboxrightimg}
                                                source={
                                                    require('@/assets/images/zichan/time.png')
                                                }
                                            />
                                            <Text style={styles.listItemDesc}>{(item as any).createTime || ''}</Text>
                                        </View>
                                    </View>
                                    <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginTop:size(13)}}>
                                        <View style={{flexDirection:'row',alignItems:'center'}}>
                                            <Text style={styles.listItemDesc}>数量</Text>
                                        </View>
                                        <View>
                                            <Text style={styles.listItemDesc}>币种</Text>
                                        </View>
                                    </View>
                                    <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginTop:size(13)}}>
                                        <View style={{flexDirection:'row',alignItems:'center'}}>
                                            <Text style={[styles.listItemDesc,{fontWeight:'500',color:'#333333'}]}>{(item as any).afterBalance?(item as any).afterBalance:'0'}</Text>
                                        </View>
                                        <View>
                                            <Text style={[styles.listItemDesc,{fontWeight:'500',color:'#333333'}]}>USDT</Text>
                                        </View>
                                    </View>
                                </View>
                            )
                        }
                    }}
                    ListFooterComponent={renderFooter}
                    ListEmptyComponent={()=>{
                        return (
                            <View style={{paddingTop:size(60)}}>
                                <Nodata></Nodata>
                            </View>
                        )
                    }}
                    refreshControl={
                        <RefreshControl
                            refreshing={refreshing}
                            onRefresh={handleRefresh}
                            colors={['#38B781']} // Android
                            tintColor="#38B781" // iOS
                        />
                    }
                    onEndReached={handleLoadMore}
                    onEndReachedThreshold={0.5}
                />
            </View>
        </View>
    )
}

export default LiCaiLogsScreen